<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-page-header @back="goBack" content="实时采集" class="mb-10"></el-page-header>
      <div class="mb-10">
        <div class="toplineBox">
          <p class="numberline toplineBox-right">总{{page.total}}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableoption.tableStripe"
                  :border="tableoption.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                    width="120"
                    prop="create_time"
                    label="采集时间">
            </el-table-column>
            <el-table-column
                    label="采集图片"
            align="center">
              <template slot-scope="scope">
                <!--<span class="showpicVideo" @click="showImgPic(scope.$index)">共{{scope.row.picNum}}张图</span>-->
                <div class="ativeimglist">
                  <div :style="{backgroundImage: 'url('+item+')',backgroundRepeat: 'no-repeat'}" v-for="(item,index) in scope.row.piclist" class="ativeimglist-list" :key="index" @click="showImgPic(scope.$index)">
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                    width="80"
                    label="采集视频">
              <template slot-scope="scope">
                <span class="showpicVideo" @click="showVideoSrc(scope.$index)">查看视频</span>
              </template>
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="采集评价"
                    width="260">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                :page-size="page.pagesize"
                :current-page="page.pageindex"
                layout="total, prev, pager, next"
                :total="page.total"
                @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <!--<activeImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></activeImgDialog>-->
    <activeVideoDialog :videosrcCheck="videosrcCheck" :visible.sync="dialogvideoVisible"></activeVideoDialog>
    <!--    图片弹窗-->
    <showimageDialog :showImgObj="showImgObj" :visible.sync="dialogImgVisible"></showimageDialog>
  </div>
</template>

<script>
  import {pagination, tableoption, yeartime} from '@/utils/util.js'
  import activeImgDialog from '@/components/dialog/activeImgDialog.vue'
  import activeVideoDialog from '@/components/dialog/activeVideoDialog.vue'
  import showimageDialog from '@/components/dialog/showimageDialog.vue'
  import api from '@/utils/api.js'

  export default {
    components: {
      activeImgDialog,
      activeVideoDialog,
      showimageDialog
    },
    data () {
      return {
        dialogImgVisible: false,
        dialogvideoVisible: false,
        imgsrcCheck: [],
        videosrcCheck: '',
        tableoption: tableoption,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [],
        editId: this.$route.query,
        showImgObj: []
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        this.$post(api.corner_comment_index, {
          p: this.page.pageindex,
          apply_id: this.editId.id
        }).then((response) => {
          if (response.code === 0) {
            for (let i in response.list.data) {
              if (response.list.data[i].pic) {
                let picImg = response.list.data[i].pic.split(',')
                response.list.data[i].picNum = picImg.length
                response.list.data[i].piclist = response.list.data[i].pic.split(',')
              } else {
                response.list.data[i].picNum = 0
                response.list.data[i].piclist = []
              }
              response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            }
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleEdit (index) {
        this.$router.push('/CornerApplyHestoryDetail?id=' + this.arryList[index].id)
      },
      showVideoSrc (index) {
        if (this.arryList[index].video) {
          this.videosrcCheck = this.arryList[index].video
          this.dialogvideoVisible = true
        } else {
          this.$message.error('没有可查看的视频')
        }
      },
      showImgPic (index) {
        if (this.arryList[index].pic) {
          // this.imgsrcCheck = this.arryList[index].pic.split(',')
          this.showImgObj = this.arryList[index].piclist
          this.dialogImgVisible = true
        } else {
          this.$message.error('没有可查看的图片')
        }
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      showClassList (indexList, index) {
        this.$router.push('/CornerApplyHestoryDetail?corner_id=' + this.arryList[indexList].corner_id + '&class_id=' + this.arryList[indexList].apply_class[index].id)
      },
      viewImgDialogFn (index) {
        this.imgsrcCheck = this.arryList[index].pic
        this.dialogImgVisible = true
      },
      goBack () {
        this.$router.go(-1)
      }
    },
    mounted () {
    }
  }
</script>

